<template>
  <view class="hot-activity">
    <view class="hot-item">
      <view class="hot-left">
        <image
          class="hot-image"
          :style="{ height: isCate ? 140 + 'rpx' : '' }"
          src="@/static/logo.png"
          mode="scaleToFill"
        />
      </view>
      <view class="hot-right">
        <text class="hot-title">帮老人烧饭</text>
        <text class="hot-info ellipsis">适用范围：老人年纪大，行动不方便，需要一个人做饭。</text>
        <view class="hot-price-box">
          <text class="hot-old-price">原价¥100</text>
          <text class="hot-count">销量:10000</text>
        </view>
        <view class="hot-real-box">
          <view class="hot-real-price"> ¥<text class="real-price-content">399</text> </view>
          <text class="button-box" v-if="isDetail">去购买</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
withDefaults(defineProps<{ isDetail: boolean; isCate: boolean }>(), {
  isDetail: false,
  isCate: false,
})
</script>
<style lang="scss" scoped>
.hot-activity {
  .hot-item {
    padding: 18rpx;
    background-color: #ffffff;
    display: flex;
    .hot-left {
      width: 30%;
      height: 100%;
      .hot-image {
        width: 90%;
        height: 200rpx;
      }
    }
    .hot-right {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .hot-title {
        font-weight: 600;
        font-size: 34rpx;
      }
      .hot-info {
        color: #c1bfcd;
        font-size: 28rpx;
      }

      .hot-price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .hot-old-price {
          color: #c1bfcd;
          font-size: 28rpx;
          text-decoration: line-through;
        }
        .hot-count {
          color: #eb0436;
          font-size: 28rpx;
        }
      }

      .hot-real-box {
        display: flex;
        justify-content: space-between;

        .hot-real-price {
          color: #eb0436;
          font-size: 26rpx;
          .real-price-content {
            font-size: 40rpx;
            font-weight: 600;
          }
        }

        .button-box {
          font-size: 28rpx;
          padding: 10rpx 30rpx;
          background-color: #eb0436;
          color: #ffffff;
          border-radius: 8rpx;
        }
      }
    }
  }
}
</style>
